.add_contact_form input {
    margin: 5px;
    margin-left: 0px;
}

.add_contact_form {
    padding-top: 10px;
    display: block;
}

.contact_list {
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 20px;
    width: 50%;
}

.contact_list td {
    white-space: nowrap;
    padding-right: 20px;
    padding-bottom: 5px;
    vertical-align: -5px;
    padding-top: 5px;
    border-bottom: solid 1px #ddd;
}

.gmail_contacts {
    margin-top: 50px;
}

.contact_list_title {
    padding-top: 0px !important;
    padding-bottom: 10px;
}

.show_contact img,
.edit_contact img,
.send_to_contact img,
.delete_contact img {
    opacity: .5;
    margin-left: 10px;
    cursor: pointer;
}

.contact_controls {
    text-align: right;
}

.add_contact_row img {
    opacity: .4;
    margin-right: 10px;
}

.add_contact_controls {
    display: none;
}

.contact_suggestion {
    display: block;
}

.close_autocomplete {
    float: right;
}

#cc_contacts,
#bcc_contacts,
#to_contacts {
    z-index: 10;
    display: none;
    margin-top: -5px;
    position: absolute;
    background-color: #fff;
    border: solid 1px #ddd;
    padding: 10px;
    border-radius: 3px 3px 3px 3px;
    border-top: none;
}

.contact_pages {
    text-align: center;
    border-bottom: none !important;
}

.no_contact_sources {
    text-align: center;
    color: #999;
    font-size: 110%;
    margin-top: 60px;
}

.add_contact_responsive {
    margin: 10px 0;
    color: #666;
    width: 100%;
    box-sizing: border-box;
    float: none;
    clear: both;
    display: block;
    visibility: visible;
}

@media (max-width: 767px) {
    .add_contact_responsive {
        width: 95vw;
        margin: 10px;
    }
}

@media (min-width: 768px) {
    .add_contact_responsive {
        width: 80%;
        margin: 10px auto;
    }
}

@media (min-width: 1024px) {
    .add_contact_responsive {
        width: 300px;
        margin: 10px 25px;
    }
}
.contact_form {
    margin-top: 10px;
    display: none;
}

.contact_detail_row {
    border: none;
    display: none;
}

.display_name,
.email_address,
.phone_number {
    font-weight: bold;
}

.show_contact {
    margin-right: 15px;
}

.contact_detail th {
    font-weight: normal;
    text-align: left;
    padding-right: 20px;
}

.contact_fld {
    max-width: 300px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.contact_name_fld {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#contact_csv {
    width: 80%;
}

.contact_import_detail td {
    border-bottom: none !important;
}

.mobile .contact_list {
    width: 95vw;
    margin: auto;
}

.mobile .contact_controls img {
    width: 20px;
    height: 20px;
}

.mobile .contact_list_title,
.mobile .add_contact {
    display: none;
}

.mobile .contact_fld {
    display: none;
}

.mobile .contact_name_fld {
    max-width: 120px;
}

.contact_src {
    display: none;
}

.mobile .add_contact_row {
    display: none;
}

.mobile .add_contact_row a {
    display: none;
}

/* Table css */
.contact-group { margin: 0;padding: 0;border: 0;outline: none;font-size: 0;text-align: left;padding-top: 15px; }
.contact-group>input { position: absolute;left: -9999px; }
.contact-group>label { position: relative;display: inline-block;margin: 0;padding: 0;border: 0;outline: none;cursor: pointer;transition: all 0.1s;-o-transition: all 0.1s;-ms-transition: all 0.1s;-moz-transition: all 0.1s;-webkit-transition: all 0.1s; }
.contact-group>label i { display: block;float: left;margin: 16px 8px 0 -2px;padding: 0;border: 0;outline: none;font-family: FontAwesome;font-style: normal;font-size: 17px; }
.contact-group>input:checked+label { cursor: default; }
.contact-group>ul { list-style: none;position: relative;display: block;overflow: hidden;margin: 0;padding: 0;border: 0;outline: none;font-size: 13px; }
.contact-group>ul>li { position: absolute;width: 100%;overflow: auto;padding: 20px 0px;box-sizing: border-box;-moz-box-sizing: border-box;opacity: 0;transition: all 0.5s;-o-transition: all 0.5s;-ms-transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; }
.contact-group>.tab-content-first:checked~ul .tab-content-first,
.contact-group>.tab-content-2:checked~ul .tab-content-2,
.contact-group>.tab-content-3:checked~ul .tab-content-3,
.contact-group>.tab-content-4:checked~ul .tab-content-4,
.contact-group>.tab-content-5:checked~ul .tab-content-5,
.contact-group>.tab-content-6:checked~ul .tab-content-6,
.contact-group>.tab-content-7:checked~ul .tab-content-7,
.contact-group>.tab-content-8:checked~ul .tab-content-8,
.contact-group>.tab-content-9:checked~ul .tab-content-9,
.contact-group>.tab-content-last:checked~ul .tab-content-last { z-index: 1;top: 0;left: 0;opacity: 1;-webkit-transform: scale(1, 1);-webkit-transform: rotate(0deg); }

.contact-group-height-auto>ul { height: auto !important;}
.contact-group-height-auto>ul>li { position: static;display: none;height: auto !important; }
.contact-group-height-auto>.tab-content-first:checked~ul .tab-content-first,
.contact-group-height-auto>.tab-content-2:checked~ul .tab-content-2,
.contact-group-height-auto>.tab-content-3:checked~ul .tab-content-3,
.contact-group-height-auto>.tab-content-4:checked~ul .tab-content-4,
.contact-group-height-auto>.tab-content-5:checked~ul .tab-content-5,
.contact-group-height-auto>.tab-content-last:checked~ul .tab-content-last { display: block; }
.contact-group .grid-row { margin-top: 20px;}
.contact-group .grid-row:after { content: '';display: table;clear: both; }
.contact-group .grid-row:first-child { margin-top: 0;}
.contact-group .grid-col { display: block;float: left;margin-left: 2%; }
.contact-group .grid-col:first-child { margin-left: 0;}
.contact-group .grid-col .inner { padding: 10px 0;border-radius: 5px;background: #BDCBE5;text-align: center; }
.contact-group .grid-col-1 { width: 15%; }
.contact-group .grid-col-2 { width: 32%; }
.contact-group .grid-col-3 { width: 49%; }
.contact-group .grid-col-4 { width: 66%; }
.contact-group .grid-col-5 { width: 83%; }
.contact-group .grid-col-offset-1 { margin-left: 19%; }
.contact-group .grid-col-offset-1:first-child { margin-left: 17%; }
.contact-group .grid-col-offset-2 { margin-left: 36%; }
.contact-group .grid-col-offset-2:first-child { margin-left: 34%; }
.contact-group .grid-col-offset-3 { margin-left: 53%; }

.contact-group .grid-col-offset-3:first-child { margin-left: 51%; }

.contact-group .grid-col-offset-4 { margin-left: 70%; }

.contact-group .grid-col-offset-4:first-child { margin-left: 68%; }
.contact-group .grid-col-offset-5:first-child { margin-left: 85%; }

.contact-group .typography { color: #666; }
.contact-group .typography h1,
.contact-group .typography h2,
.contact-group .typography h3,
.contact-group .typography h4,
.contact-group .typography h5,
.contact-group .typography h6 { margin: 40px 0 0 0; padding: 0; text-align: left; color: #333; }
.contact-group .typography h1 { font-size: 40px; line-height: 60px; text-shadow: 3px 3px rgba(0, 0, 0, 0.1); }
.contact-group .typography h2 { font-size: 32px; line-height: 48px; text-shadow: 2px 2px rgba(0, 0, 0, 0.1); }
.contact-group .typography h3 { font-size: 26px;line-height: 38px;text-shadow: 1px 1px rgba(0, 0, 0, 0.1); }
.contact-group .typography h4 { font-size: 20px;line-height: 30px; }
.contact-group .typography h5 { font-size: 15px;line-height: 23px;text-transform: uppercase; }
.contact-group .typography h6 { font-size: 13px;line-height: 20px;font-weight: 700;text-transform: uppercase; }
.contact-group .typography p { margin: 20px 0 0 0;padding: 0;line-height: 20px;text-align: left; }
.contact-group .typography ul,
.contact-group .typography ol { list-style: none; margin: 20px 0 0 0; padding: 0; }
.contact-group .typography li { position: relative; margin-top: 5px; padding-left: 20px; }
.contact-group .typography li ul,.contact-group .typography li ol { margin-top: 5px; }
.contact-group .typography ul li:before {content: '';position: absolute;top: 8px;left: 0;width: 6px;height: 4px;background: #404040;}
.contact-group .typography ol { counter-reset: list1; }
.contact-group .typography ol>li:before { counter-increment: list1; content: counter(list1)'.'; position: absolute; top: 0; left: 0; }
.contact-group .typography a { text-decoration: underline; color: #008080; }
.contact-group .typography a:hover { text-decoration: none; }
.contact-group .typography .pic { padding: 4px; border: 1px dotted #ccc; }
.contact-group .typography .pic img { display: block; }
.contact-group .typography .pic-right { float: right; margin: 0 0 10px 20px;}
.contact-group .typography .link {text-decoration: underline;color: #008080;cursor: pointer;}
.contact-group .typography .link:hover {text-decoration: none;}
.contact-group .typography h1:first-child,.contact-group .typography h2:first-child,.contact-group .typography h3:first-child,.contact-group .typography h4:first-child,.contact-group .typography h5:first-child,.contact-group .typography h6:first-child,.contact-group .typography p:first-child { margin-top: 0; }
.contact-group .typography .text-center { text-align: center; }
.contact-group .typography .text-right { text-align: right; }
.contact-group-steps>label { cursor: default; }

.contact-group-effect-scale>ul>li { -webkit-transform: scale(0.1, 0.1); }
.contact-group-effect-rotate>ul>li { -webkit-transform: rotate(180deg); }
.contact-group-effect-slide-top>ul>li { top: -40px; }
.contact-group-effect-slide-right>ul>li { left: 80px; }
.contact-group-effect-slide-bottom>ul>li { top: 40px; }
.contact-group-effect-slide-left>ul>li { left: -80px; }

.contact-group-layout-top-right { text-align: right; }
.contact-group-layout-top-center { text-align: center; }
.contact-group>.right { float: right; }

@media screen and (max-width: 980px) {}

@media screen and (max-width: 767px) {
    .contact-group>label { display: block; }
    .contact-group>.right { float: none; }
}

.contact-group>label { padding: 0 20px; background: #e5e5e5; font-size: 13px; line-height: 49px; }
.contact-group>label:hover { background: #f2f2f2; }
.contact-group>input:checked+label { background: #f2f2f2; }
.contact-group>ul { background: #fff;text-align: left; }
.contact-group-steps>label:hover { background: #e5e5e5; }

.contact-group-theme-1>label { margin: 0 5px 5px 0;border-radius: 5px;background: #fff;box-shadow: 0 2px rgba(0, 0, 0, 0.2);color: #808080;opacity: 0.8; }
.contact-group-theme-1>label:hover { opacity: 1; }
.contact-group-theme-1>input:checked+label { margin-bottom: 0; padding-bottom: 5px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; color: 008080; opacity: 1; }
.contact-group-theme-1>ul { border-radius: 5px; }
.contact-group-theme-1>.tab-content-first:checked~ul { border-top-left-radius: 0; }
@media screen and (max-width: 767px) {
    .contact-group-theme-1>label { margin-right: 0 }
    .contact-group-theme-1>input:checked+label { margin-bottom: 5px; padding-bottom: 0; border-radius: 5px }
    .contact-group-theme-1>.tab-content-first:checked~ul { border-top-left-radius: 5px; }
}

.contact-group>ul,
.contact-group>ul>li {height: 100vh;}